<template>
  <div>
    <div v-loading="loading" class="gl_mb_15 gl_fs_14">
      赛事当前计费模式为：{{ type }}
    </div>
    <el-tabs v-model="activeName" type="border-card" style="min-height: calc(100vh - 260px);" @tab-click="handleClick">
      <el-tab-pane label="传统计费" name="tradition">
        <Tradition v-if="isFirst" @refreshSetting="getSetting()" />
      </el-tab-pane>
      <el-tab-pane label="按项目计费" name="project">
        <Project v-if="isSecond" @refreshSetting="getSetting()" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  api_GET_EventsManagementCompetitionSettingWithCompetitionIdCompetitionId
} from '@/extend/api/gameswaggerApi/app';
import Tradition from './tradition';
import Project from './project';
export default {
  components: {
    Tradition,
    Project
  },
  data() {
    return {
      activeName: 'tradition',
      type: '- -',
      loading: false,
      isFirst: true,
      isSecond: false
    };
  },
  created() {
    this.getSetting();
  },
  methods: {
    handleClick(tab) {
      if (tab.name === 'tradition') {
        this.isFirst = true;
        this.isSecond = false;
      } else if (tab.name === 'project') {
        this.isFirst = false;
        this.isSecond = true;
      }
    },
    // 获取赛事设置
    getSetting() {
      var that = this;
      that.loading = true;
      const form = {
        IncludeInsurance: true,
        IncludeLeagueFinalPromotionType: true
      };
      api_GET_EventsManagementCompetitionSettingWithCompetitionIdCompetitionId(this.$route.params.id, form).then(res => {
        const obj = res || {};
        if (obj.chargeTypeCode && (obj.chargeTypeCode === 'Category' || obj.chargeTypeCode === 'Tradition')) {
          this.type = obj.chargeTypeCode === 'Category' ? '按项目计费' : '传统计费';
        }
        that.loading = false;
      }, (error) => {
        that.loading = false;
        that.$message({ type: 'error', message: error.error.message });
      });
    }
  }
};
</script>
